<template>
  <section class="banner" v-if="isShow">
    <template v-for="(item, index) in bannerList">
      <el-link
        v-if="index < 2"
        :underline="false"
        :key="item.id"
        @click="toDetail(item.site)"
      >
        <el-image
          style="width: 595px; height: 60px"
          :src="item.photo"
          fit="fit"
        ></el-image>
      </el-link>
    </template>
  </section>
</template>

<script>
import { getBannerList } from "@/api/api.js";
export default {
  name: "Banner",
  data() {
    return {
      isShow: false,
      bannerList: [],
    };
  },
  created() {
    this.getBannerList();
  },
  methods: {
    getBannerList() {
      getBannerList({ type: 1 }).then((res) => {
        console.info("广告列表", res);
        this.bannerList = res.data || [];
        if (this.bannerList[0].status === 1) {
          this.isShow = true;
        }
      });
    },
    toDetail(url) {
      window.open(url);
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  height: 60px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
</style>
